<template>
  <view class="content">
    <view class="hei"></view>
    <view class="title">登录</view>
    <view class="hei"></view>
    <fui-input :borderBottom="false" isFillet backgroundColor="#eee" placeholder="请输入手机号" v-model="loginData.phone">
      <template v-slot:left>
        <view style="padding: 0 20rpx"><fuiIcon name="mobile" /></view>
      </template>
    </fui-input>
    <view class="hei"></view>
    <fui-input :borderBottom="false" isFillet backgroundColor="#eee" password placeholder="请输入密码" v-model="loginData.pwd">
      <template v-slot:left>
        <view style="padding: 0 20rpx"><fuiIcon name="lock" /></view>
      </template>
    </fui-input>

    <view class="hei" style="height: 100rpx"></view>
    <fui-button background="#000" @click="login">登录</fui-button>
    <view class="changeLogin" @click="changeLogin">账号注册</view>
  </view>
</template>

<script setup lang="ts">
import fuiInput from "@/components/firstui/fui-input/fui-input.vue";
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue";
import fuiButton from "@/components/firstui/fui-button/fui-button.vue";
import { onMounted, reactive, ref } from "vue";
import Service from "@/service";
import Store from "@/store";
import Nav from "@/router";
const loginData = reactive({
  phone: "1381111111",
  pwd: "123456",
});

onMounted(() => {
  if (Store.User.isLogin === true) {
    Nav.NavReplacePage("Index");
  }
});

const login = () => {
  Service.User.login(loginData).then(res => {
    console.log(res);
    Store.Common.setRequestHeaderToken(res);
    Service.User.detail().then(res => {
      Store.User.setUserInfo(res);
      Store.User.setIsLogin(true);
      Nav.NavReplacePage("Index");
    });
  });
};

const changeLogin = () => {
  uni.$emit("changeLogin");
};
</script>
<style scoped>
.content {
  width: 710rpx;
  margin: 20rpx;
  background: transparent;
}
.title {
  font-size: 50rpx;
  font-weight: bold;
  padding-left: 20rpx;
  color: white;
}
.hei {
  height: 20rpx;
}
.changeLogin {
  width: 700rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 35rpx;
  color: white;
  text-align: right;
  text-decoration: underline;
}
</style>
